<!-- src/components/AuthorInfo.vue -->
<template>
  <div class="article-detail">
  <el-card class="author-card">
    <div class="author-header">
      <el-avatar :size="60" :src="author.avatar" />
      <div class="info">
        <h3>{{ author.name }}</h3>
      </div>
  
    </div>
    <div>
        <div class="bio">
      <span><p class="bio">简介:{{ author.bio }}</p></span>
      </div>
    </div>
    <el-divider />
    <div class="stats">
      <div class="stat-item">
        <span class="label">文章数</span>
        <span class="value">{{ author.articlesCount }}</span>
      </div>
      <div class="stat-item">
        <span class="label">关注者</span>
        <span class="value">{{ author.followers }}</span>
      </div>
    </div>
  </el-card>
  </div>
</template>

<script setup >
import { ref, onMounted } from "vue";


const author = ref({
  name: "阿义有问题",
  avatar: "https://p26-passport.byteacctimg.com/img/user-avatar/349270a573badebe73096ca0c5d88661~150x150.awebp",
  bio: "我是测试员，专注于前端开发和用户体验设计。",
  articlesCount: 10,
  followers: 10,
});

</script>

<style scoped>
.article-detail {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}
.author-card {
  .author-header {
    display: flex;
    align-items: center;
    gap: 15px;
    .info {
      h3 {
        margin: 0;
        font-size: 18px;
      }
      .bio {
        color: #666;
        margin: 5px 0 0;
        font-size: 14px;
      }
    }
  }
  .stats {
    display: flex;
    justify-content: space-around;
    .stat-item {
      text-align: center;
      .label {
        display: block;
        color: #666;
        font-size: 12px;
      }
      .value {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
</style>
